<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
  </head>
  <style>
    img {
      width: 100px
    }
  </style>

  <body>
    <div id="app">
      <!-- 
      v-if和v-show对比：
        1.v-if:适用于切换频率很低的场景
          特点：不展示的DOM节点直接被删除
        2.v-show：适用于切换频率很高的节点
          特点：不展示的DOM节点没有被删除，仅仅是使用样式隐藏掉  
        3.使用v-if时，DOM节点可能无法获取到，二使用v-show一定会获取到DOM节点

       -->
      <!-- v-show使用 -->
      <!-- <h3>我是不是整的很帅？{{isFlag ? "是":"否"}}</h3>
      <div v-show="isFlag">
        <img src="../img/shuai.jpg" alt="">
        <p>你他妈长得真的很帅</p>
      </div>
      <div v-show="!isFlag">
        <img src="../img/jianren.jpg" alt="">
        <p>贱人</p>
      </div> -->


      <!-- v-if使用 -->
      <h3>我是不是整的很帅？{{isFlag ? "是":"否"}}</h3>
      <div v-if="isFlag">
        <img src="../img/shuai.jpg" alt="">
        <p>你他妈长得真的很帅</p>
      </div>
      <div v-else>
        <img src="../img/jianren.jpg" alt="">
        <p>贱人</p>
      </div>
      <button @click="isFlag=!isFlag">切换帅</button>
    </div>

  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          isFlag: true
        }
      },
      methods: {
        changeBtn: function () {
          return this.isFlag = !this.isFlag
        }
      }
    })
  </script>

</html>